<template>
  <!--父盒子开始-->
  <div id="home">
    <!--整体布局-->
    <el-container>
      <!--左侧导航栏开始--->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <!--如果是展开的就给200px宽度如果不是就给64px宽度-->
        <el-scrollbar class="hiddens" ref="scroll" @mousewheel.native="scrolls">
          <el-menu
            :collapse="isCollapse"
            :router="true"
            active-text-color='#409EFF'
            text-color='#BFCBD9'
            :unique-opened="true"
            background-color="#324157"
            
            :default-active="this.$route.path"
          >
            <!--第一层列表渲染开始-->
            <template v-for="(item, index) in list">
              <el-menu-item v-if="index <= 0" :key="index" :index="item.index" >
                <i :class="item.icon"></i>
                <span slot="title">{{ $t(item.title) }}</span>
              </el-menu-item>

              <el-submenu v-else :index="item.title" :key="index">
                <template slot="title">
                  <i :class="item.icon"></i>
                  <span slot="title">{{ $t(item.title) }}</span>
                </template>
                <!--第一层列表渲染结束-->

                <!--第二层列表渲染开始-->
                <el-menu-item-group
                  v-for="(items, index) in item.lists"
                  :key="index"
                >
                  <el-menu-item :index="items.index">
                    {{ $t(items.title) }}
                  </el-menu-item>
                </el-menu-item-group>
                <!--第二层列表渲染结束-->
              </el-submenu>
            </template>
          </el-menu>
        </el-scrollbar>
      </el-aside>
      <!--左侧导航栏结束--->

      <el-container>
        <!--顶部开始-->
        <el-header>
          <!-- <div class="headerLeft"> -->
          <div @click="icons" class="icons">
            <i
              class="el-icon-s-unfold"
              :class="isCollapse ? 'icon_back' : 'icon_unfold'"
            ></i>
          </div>
          <!--顶部__面包屑开始-->
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/homepag' }"
              >首页</el-breadcrumb-item
            >
            <template v-if="this.$route.matched[0].name">
              <el-breadcrumb-item>{{
                this.$route.matched[0].name
              }}</el-breadcrumb-item>
              <el-breadcrumb-item>{{
                this.$route.meta[0].name
              }}</el-breadcrumb-item>
            </template>
          </el-breadcrumb>
          <!--顶部__面包屑结束-->
          <div class="headerRight">
            <!--全屏开始-->
            <el-tooltip class="item" effect="dark" content="全屏" placement="bottom">
            <div class="fullScreen"><span @click="fullScreens"><i class="el-icon-full-screen"></i></span>
            </div></el-tooltip>
            <!--全屏结束-->
            <!--换肤开始-->
            <el-tooltip class="item" effect="dark" content="换肤" placement="bottom">
             <Element-Color class="elementColor"></Element-Color>
             </el-tooltip>
            <!--换肤结束-->
          <!--中英文切换开始-->
          <el-tooltip class="item" effect="dark" content="中英文切换" placement="bottom">
          <div class="langueShift" @click="zhLangs">
            <img src="../assets/img/zyw.png" >
          </div>
          </el-tooltip>
          <!--中英文切换结束-->
          <!--顶部__头像下拉菜单开始-->
          <el-dropdown trigger="click" class="userportrait">
            <span class="el-dropdown-link">
              <div class="userPic">
                <img src="../assets/img/tx.jpeg" />
              </div>
              <span class="el-icon-arrow-down el-icon--right"></span>
            </span>
            <el-dropdown-menu slot="dropdown">
              <router-link to="/homepag" class="router_link">
                <el-dropdown-item>首页</el-dropdown-item>
              </router-link>
              <el-dropdown-item @click.native="loginOut"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
          </div>
          <!--顶部__头像下拉菜单结束-->
        </el-header>
        <!--顶部结束-->

        <!--中间内容开始-->
        <el-main>
          <!--tabset是标签页自定义组件-->
          <div class="home_Tag">
            <tabset :tablist="tablist"></tabset>
          </div>
          <!--路由里的页面-->
          <el-scrollbar>
            <router-view />
          </el-scrollbar>
          <!--路由里的结束-->
        </el-main>
        <!--中间内容结束-->
      </el-container>
    </el-container>
    <!--整体布局结束-->
  </div>
  <!--父盒子结束-->
</template>

<script>
import Cookie from "js-cookie"; //引进Cookie
import tabset from "../components/TabSet.vue"; //自定义组件
import ElementColor from "../components/elementColor.vue"; //引入换肤

export default {
  //注册组件
  components: {
    tabset,
    ElementColor
  },
  data() {
    return {
      isCollapse: false, //导航栏是否展开
      tablist: [], //传给子组件的数据
      fullscreen:false,//是否全屏
      list: [
        //左侧导航栏数据
        //title是标题名  index是用来跳转路由  icon是图标
        {
          title: "homeTab.homepag",
          index: "/homepag",
          icon: "el-icon-s-home"
        },
        {
          //左侧导航栏---运营管理
          title: "homeTab.operate",
          index: "/Home",
          icon: "el-icon-data-analysis",
          lists: [
            { title: "homeTab.Indent", index: "/operate/indent" },
            { title: "homeTab.Comment", index: "/operate/comment" },
            { title: "homeTab.Freight", index: "/operate/freight" }
          ]
        },
        {
          //左侧导航栏---商品管理
          title: "homeTab.goods",
          index: "/Home",
          icon: "el-icon-s-shop",
          lists: [
            { title: "homeTab.GoodsList", index: "/goods/goodsList" },
            { title: "homeTab.GoodsCategory", index: "/goods/goodscategory" }
          ]
        },
        {
          //左侧导航栏---推广管理
          title: "homeTab.promotion",
          index: "/Home",
          icon: "el-icon-coin",
          lists: [
            { title: "homeTab.Advertising", index: "/promotion/advertising" },
            { title: "homeTab.Recommend", index: "/promotion/recommend" },
            { title: "homeTab.Discount", index: "/promotion/discount" },
            { title: "homeTab.Shop", index: "/promotion/shop" }
          ]
        },
        {
          //左侧导航栏---系统管理
          title: "homeTab.system",
          index: "/Home",
          icon: "el-icon-s-tools",
          lists: [
            { title: "homeTab.Member", index: "/system/member" },
            { title: "homeTab.Admin", index: "/system/admin" },
            { title: "homeTab.Role", index: "/system/role" }
          ]
        }
      ]
    };
  },
  methods: {
   //切换中英文
    zhLangs() {
      console.log(666)
      if(this.$i18n.locale === "中文"){
        this.$i18n.locale = "English"
      }else{
        this.$i18n.locale = "中文"
      }
    },
    //是否全屏
    fullScreens(){
       let element = document.documentElement;
        // 判断是否已经是全屏
        // 如果是全屏，退出
        if (this.fullscreen) {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
            console.log('已还原！');
        } else {    // 否则，进入全屏
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.webkitRequestFullScreen) {
                element.webkitRequestFullScreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.msRequestFullscreen) {
                // IE11
                element.msRequestFullscreen();
            }
            console.log('已全屏！');
        }
        // 改变当前全屏状态
        this.fullscreen = !this.fullscreen;
    },
    //是否需要在退出后清除密码以及用户名
    loginOut() {
      var _this = this; //指定this指向
      this.axios({
        //退出接口
        url: "m.api?_gp=admin&_mt=logout&ADMINTOKEN=" + Cookie.get("token"),
        methods: "get",
        headers: {
          AdminToken: Cookie.get("token")
        }
      })
        .then(function() {
          //判断Cookie里是否存了token
          _this.Prosperity.Messages("退出成功", "success");
          Cookie.remove("token"); //清除Cookie里的token令牌
          Cookie.remove("perms"); //清除Cookie里的token令牌
          setTimeout(
            () => _this.$router.push("/?returnUrl=" + _this.$route.path),
            700
          );
        })
        .catch(err => {
          return err;
        });
    },
    //标签页滚动条
    scrolls(e) {
      if (e.wheelDelta < 0) {
        //如果大于0代表向上滚动
        this.$refs.scroll.wrap.scrollTop =
          this.$refs.scroll.wrap.scrollTop + 30;
      }
      if (e.wheelDelta > 0) {
        //如果小于0代表向下滚动
        this.$refs.scroll.wrap.scrollTop =
          this.$refs.scroll.wrap.scrollTop - 30;
      }
    },
    //点击展开导航栏或关闭导航栏
    icons() {
      this.isCollapse = !this.isCollapse; //布尔值取反
    },
    //循环数组获取里面内容并且去重
    crumbs() {
      for (let b in this.list) {
        if (this.list[b].index == this.$route.path) {
          this.title = b.title;
          if (!this.tablist.includes(this.list[b])) {
            //去重
            this.tablist.push(this.list[b]); //添加进数组
          }
          return;
        }
        for (let s in this.list[b].lists) {
          if (this.list[b].lists[s].index == this.$route.path) {
            if (!this.tablist.includes(this.list[b].lists[s])) {
              this.tablist.push(this.list[b].lists[s]);
            }
            return;
          }
        }
      }
    }
  },
  watch: {
    $route() {
      //监听路由
      this.crumbs();
    }
  },
  created() {
    this.crumbs();
    this.$i18n.locale = "中文"; // 关键语句
  }
};
</script>

<style>
/*媒体查询*/
@media screen and (max-width: 550px) {
  .el-breadcrumb {
    display: none;
  }
  .el-dropdown {
    display: none;
  }
}
/*媒体查询结束*/

body,
html {
  margin: 0px;
  padding: 0px;
  height: 100%;
}

.router_link {
  /*去下划线*/
  text-decoration: none;
}

/*标签页最大盒子的样式*/
.home_Tag {
  height: 35px;
  border-top: 1px solid #d8dce5;
  border-bottom: 1px solid #d8dce5;
  display: flex;
  background: #fff;
}
/*标签页最大盒子结束*/

/*实现图标旋转开始*/
.icon_back {
  transform: rotate(0deg);
  transition: 0.7s;
}
.icon_unfold {
  transform: rotate(-180deg);
  transition: 0.7s;
}
/*实现图标旋转结束*/

/*头部*/
.el-header {
  display: flex;
  height: 49px !important;
  padding: 0px!important;
}
.el-breadcrumb {
  line-height: 50px !important;
  margin-left: 20px;
  float: left;
  width: 420px !important;
}
#home,
.el-container {
  height: 100%;
}
.icons_header > div {
  font-size: 5px;
}
.icons {
  width: 30px;
  height: 30px;
  float: left;
}
.icons > i {
  font-size: 21px;
  line-height: 49px;
}
/*头部结束*/

/*左侧tab切换*/
.el-aside {
  background-color: #324157;
  color: #333;
  overflow: auto;
  line-height: 200px;
  height: 100%;
  transition: 0.7s;
}
/*左侧tab切换结束*/

/*右边部分的内容*/
.el-main {
  /*右下部分*/
  background-color: #fff;
  color: #333;
  text-align: left;
  padding: 0px!important;
  overflow: hidden !important;
}
.hiddens {
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}
.el-scrollbar__thumb {
  width: 0px !important;
}
.el-scrollbar {
  height: 100%;
}
.el-scrollbar/deep/.el-scrollbar__wrap {
  overflow: hidden;
  width: 100%;
}
.el-scrollbar__wrap {
  overflow: auto !important;
}
body > .el-container {
  margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: max-content !important;
  min-height: 400px;
}
.el-menu {
  height: 100%;
  border: 0px !important;
}
.el-submenu__title,
.el-menu-item {
  /* color: rgb(191, 203, 217)!important; */
  text-align: left;
}

/*右边部分结束*/

/*头像部分*/
.userportrait {
  float: right;
  width: 75px !important;
  height: 50px !important;
}
.userportrait .el-dropdown-link {
  width: 75px !important;
  height: 50px;
  display: flex;
}
.userportrait .el-dropdown-selfdefine > span {
  float: left;
  margin: auto 0px;
}
.userPic {
  border-radius: 50%;
  float: right;
  margin: auto 0px;
  margin-right: 3px;
}
.userPic > img {
  width: 43px;
  height: auto;
  border-radius: 50%;
}
/*头像结束*/
/*中英文切换开始*/
.langueShift {
  width: 90px !important;
  height: 39px !important;
  position: absolute;top: 10px;right: 55px;
}
.langueShift img{width: 30px;height: 30px;}
/*中英文切换结束*/
/*改变皮肤开始*/
.el-color-picker{height:39px!important;position: relative;top: 5px;margin-left: 773px;}
/*改变皮肤结束*/
/*全屏*/
.fullScreen{width:35px;position:absolute;top:8px;right: 183px;}
.fullScreen i{font-size: 35px;}
.headerRight{position: absolute;right: 0px; width: 65%;}
/* .el-menu-item.is-active{color: #409EFF!important;} */
</style>
